<template>
    <Modal
            v-model="show"
            title="代码生成配置"
            @on-ok="save"
            @on-cancel="close"
            width="50%"
    >
        <i-table border :columns="columns" :data="tableData" :loading="loading"></i-table>
    </Modal>
</template>

<script>
    module.exports = {
        props:["show","tableName"],
        components: {
        },
        data() {
            return {
                show:false,
                tableName:undefined,
                columns: [
                    {
                        type: 'index',
                        width:40,
                        align: 'center'
                    },
                    {
                        title: '字段名称',
                        key: 'columnName',
                        align: 'center'
                    },
                    {
                        title: '字段类型',
                        key: 'columnType',
                        align: 'center'
                    },
                    {
                        title: '字段标题',
                        key: 'columnComment',
                        align: 'center'
                    },
                    {
                        title: '查询方式',
                        key: 'columnQuery',
                        width:120,
                        align: 'center',
                        render:(h,params)=>{
                            let opts = this.querys.map((item) =>{
                                return h('i-option', {
                                    props: {
                                        value: item.value,
                                        label: item.name
                                    }
                                },item.name)
                            })
                            return h('Select',{
                                     props:{
                                         value:params.row.columnQuery,
                                         transfer:true,
                                         clearable: true,
                                     },
                                     on: {
                                         'on-change':(event) => {
                                             console.info("select change",event)
                                             this.tableData[params.index].columnQuery = event;
                                         }
                                     },
                                 },opts
                            )
                        }
                    },
                    {
                        title: '页面组件',
                        key: 'columnControl',
                        width:120,
                        align: 'center',
                        render:(h,params)=>{
                            let opts = this.control.map((item) =>{
                                return h('i-option', {
                                    props: {
                                        value: item.value,
                                        label: item.name,

                                    }
                                },item.name)
                            })
                            return h('Select',{
                                    props:{
                                        value:params.row.columnControl,
                                        transfer:true,
                                        clearable: true,
                                    },
                                    on: {
                                        'on-change':(event) => {
                                            console.info("select change",event)
                                            this.tableData[params.index].columnControl = event;
                                        }
                                    },
                                },opts
                            )
                        }
                    },
                    {
                        title: '列表显示',
                        key: 'columnShow',
                        width:120,
                        align: 'center',
                        render:(h,params)=>{
                            let val = params.row.columnShow;
                            // val = params.index===1?false:true;
                            console.info("columnShow",val)
                            return h('i-switch',{
                                    props:{
                                        type: 'primary',
                                        value: val ,
                                    },
                                    scopedSlots:{
                                        open:()=>h('span','显示'),
                                        close:()=>h('span','不显示')
                                    },
                                    on: {
                                        'on-change':(event) => {
                                            this.tableData[params.index].columnShow = event;
                                        }
                                    },
                                }
                            )
                        }
                    },{
                        title: '自定义扩展',
                        key: 'columnCommentExtra',
                        align: 'center',
                    },
                ],
                tableData:[],
                tableName:undefined,
                querys:[
                    {
                        value:'1',
                        name:'模糊'
                    },
                    {
                        value:'2',
                        name:'精确'
                    },
                    {
                        value:'3',
                        name:'between'
                    }
                ],
                control:[
                    {
                        value:'1',
                        name:'input'
                    },
                    {
                        value:'2',
                        name:'daterange'
                    },
                    {
                        value:'3',
                        name:'datetimerange'
                    },
                    {
                        value:'4',
                        name:'select'
                    },
                ],
            }
        },
        mounted() {
            console.info("添加数据组件加载成功",this.show)

        },
        methods:{
            close(){
                this.show=false;
                this.$emit("close",this.show);
            },
            load(tableName,show) {
                console.info("create load")
                let _this = this;
                _this.tableName=tableName;
                _this.loading=true;
                this.show=show;
                iget('/admin/generator/columns',{tableName:tableName},
                    successRes => {
                        _this.tableData=successRes.content
                        console.info("columns 数据 load 完毕！",_this.tableData)
                        _this.loading=false;
                    },failureRes => {
                        console.info("加载数据异常",failureRes)
                    }
                )
            },

            uploadImg(img){
                console.info("上传成功：",img)
                this.dto.ico=img;
            },
            save() {
                console.info("生成代码ok",this.tableData)
                let _this = this;
                // _this.loading=true;
                ipost('/admin/generator?tableName='+this.tableName,
                    _this.tableData,
                    successRes => {
                        console.info("生成成功：",successRes)
                        this.$Notice.success({
                            title: '生成成功！'
                        });
                        _this.show=false;
                        // this.$emit("save");
                    },failureRes => {
                        console.info("加载数据异常asdfg",failureRes)
                    }
                )
            },
        }
    }
</script>
